<template>
	<div class="attr-wrapper" @click="deleteWrapper" ref="delete-wrapper">
		<hr style="" />
		<!-- <a-form-model-item
					label=""
					prop="username"
					style="width: 100%; display: grid; grid-auto-flow: row"
				> -->
		<div style="width: 100%">
			<!-- 属性名输入框 -->
			<span class="attr-item" style="width: 120px; white-space: nowrap">
				<a-input
					:disabled="disabled"
					:placeholder="`属性${attrNameCount}命名`"
					style="width: 120px; margin-bottom: 5px"
					v-model="attrNameValue"
				/>
				<span
					v-if="!disabled"
					class="iconfont icon-shanchu"
					name="deleteWrapper"
				></span>
				<!-- <a-icon
					type="close-circle"
					v-if="!disabled"
					class="close-circle"
					style=""
					name='deleteWrapper'
				/> -->
			</span>
			<!-- <a-input
				:disabled="disabled"
				placeholder="单位"
				style="width: 64px; margin-bottom: 5px; margin-left: 30px"
				v-model="unit"
			/> -->
			<!-- <a-button
				size="default"
				@click="saveAttr(itemCount)"
				style="margin-left: 10px"
				>添加</a-button
			>
			<a-button size="default" @click="changeStatus" style="margin-left: 10px"
				>编辑</a-button
			> -->

			<br />

			<div class="attr-content" style="">
				<!-- <span
									v-for="(item, index) in attrInputCountArr"
									:key="index"
									class="attr-item"
									style="width: 120px; white-space: nowrap"
								>
									<a-input
										v-model="attrValue"
										:placeholder="`赋值${attrInputCountArr}`"
										style="width: 120px"
									/>
									<a-icon type="close-circle" class="close-circle" style="" />
								</span> -->
				<!-- 赋值输入框 -->
				<attr-input
					ref="attInput"
					:disabled="disabled"
					:attrInputCount="index + 1"
					v-for="(item, index) in attrInputCountArr"
					:key="index"
					v-if="item"
					@removeInput="removeInput(index + 1)"
				/>

				<div class="add-attr" style="width: 120px; white-space: nowrap">
					<!-- <span @click="addValue">新增</span> -->
					<a-button :disabled="disabled" @click="addValue">新增</a-button>
					<!-- <a-input
						:disabled="disabled"
						placeholder="当行输入"
						style="width: 100px; margin-left: 10px"
					/> -->
					<!-- <a-icon
						type="plus-circle"
						class="plus-circle"
						@click="addValue"
						style=""
					/> -->
				</div>
			</div>
		</div>
		<!-- </a-form-model-item> -->
	</div>
</template>
<script>
	// import { mapGetters, mapMutations } from "vuex"
	export default {
		name: "attrWrapper",
		props: {
			// attrInputCountArr: {
			// 	type: Number,
			// 	default: 1,
			// },
			attrNameCount: {
				type: Number,
				default: 1,
			},
			// count: {
			// 	type: Number,
			// 	default: 1,
			// },
		},
		data() {
			return {
				attrNameValue: "",
				// unit: "",
				// itemCount: 1,
				// attrInputCountArr: 1,
				attrInputCountArr: [1, 0, 0, 0, 0], // 默认打开第一个input输入框
				indexCount: 1, // 表示 attrInputCountArr 的索引 也可以看作 attrInputCountArr 含有 1 的个数
				disabled: false,
			}
		},
		computed: {
			// ...mapGetters({
			// 	// disabled: "getDisabled",
			// 	// getProductDetail: "getProductDetail",
			// }),
			// productDetailChange() {
			// 	return this.$store.state.productDetail
			// },
		},
		watch: {
			// productDetailChange(a, b) {
			// 	console.log(a, b)
			// 	if (Object.keys(a).length > 0) {
			// 		if (a.option1.val && a.option1.val.length > 0) {
			// 			for (let i = 0, len = a.option1.val.length; i < len; i++) {
			// 				this.attrInputCountArr[i] = 1
			// 			}
			// 		}
			// 	}
			// },
		},

		methods: {
			deleteWrapper({ target }) {
				console.dir(target)
				if (target.getAttribute("name") === "deleteWrapper") {
					// let ele = this.$refs["delete-wrapper"]
					// console.log(ele)
					// ele.parentNode.removeChild(ele)
					// let count = this.count
					this.$emit("removeWrapper", this.attrNameCount)
					// this.attrValue = ""
					// this.attrNameValue = ""
					// this.disabled = false
					// this.attrInputCountArr = 0
				}
			},

			removeInput(attrInputCount) {
				this.attrInputCountArr[attrInputCount - 1] = 0
				this.attrInputCountArr = [...this.attrInputCountArr]
				this.attrInputCount = attrInputCount
				this.indexCount--
				console.log(attrInputCount, this.indexCount, this.attrInputCountArr)
			},

			addValue() {
				// if (this.attrInputCountArr >= 5) {
				// 	return this.$message.warning("最多赋值5个值")
				// }

				console.log(this.indexCount, this.attrInputCount)
				// if (this.indexCount >= 5) {
				// 	return this.$message.warning("最多赋5个值")
				// }

				if (this.repeatEleCount(this.attrInputCountArr, 1) >= 5) {
					return this.$message.warning("最多赋5个值")
				}

				// if (this.indexCount === 4) {
				// 	this.indexCount++
				// }

				if (this.attrInputCount) {
					// 说明有删除操作
					if (this.attrInputCountArr[this.attrInputCountArr.length - 1] === 0) {
						this.indexCount = this.attrInputCountArr.length - 1
					} else {
						this.indexCount++
					}
				}
				// this.attrInputCountArr++
				this.attrInputCountArr[this.indexCount] = 1
				this.attrInputCountArr = [...this.attrInputCountArr]
				console.log(this.attrInputCountArr)
				this.indexCount++
			},
			// 统计数组某个元素重复次数
			repeatEleCount(arr = [], ele) {
				var num = 0
				for (var i = 0, len = arr.length; i < len; i++) {
					if (arr[i] === ele) {
						num++
					}
				}
				return num
			},
			changeStatus(bool = false) {
				this.disabled = bool
				// this.setDisabled(false)
			},
			// saveAttr(itemCount) {
			// 保存
			getInputData() {
				// this.disabled = true
				setTimeout(() => {
					console.log(this.disabled)
				}, 1000)

				// this.attrInputCountArr = [...this.attrInputCountArr]
				// this.disabled = false
				// this.setDisabled(true)
				let attrInputValues = []
				let coms = this.$refs.attInput
				for (let i = 0, len = coms.length; i < len; i++) {
					attrInputValues.push(coms[i].attrValue)
				}
				attrInputValues = this.$notempty(attrInputValues) // 清除数组中赋值为空的项
				console.log(attrInputValues)
				// if (this.unit) {
				// 	attrInput = attrInput.map((item) => {
				// 		return item + this.unit
				// 	})
				// }
				// return { attrInput, unit: this.unit}
				return { attrInputValues }
				// this.$emit("getAttrInputValue", attrInput, itemCount, this.attrNameValue)
				// console.log(this.$refs.attInput[0].attrValue)
			},
		},
		components: {
			"attr-input": () => import("./attrInput.vue"),
		},
	}
</script>
<style lang='less'>
	// .attr-item {
	// 		.close-circle {
	// 			color: #1890ff;
	// 			margin-left: 10px;
	// 			font-size: 12px;
	// 			cursor: pointer;
	// 		}
	// 	}
	.attr-wrapper {
		.attr-content {
			display: grid;
			grid-auto-flow: row;
			grid-template-columns: repeat(5, 150px);
			grid-template-rows: repeat(1, 50px);
		}
		hr {
			border: none;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}
		.attr-item {
			.icon-shanchu {
				color: #1890ff;
				margin-left: 10px;
				font-size: 12px;
				cursor: pointer;
			}
		}
		.add-attr {
			.plus-circle {
				color: #1890ff;
				font-size: 12px;
				cursor: pointer;
				margin-left: 10px;
			}
		}
	}
</style>